 <template>
	 <view class="top" >
	   <view class="custom-empty-container">
		   <!-- style="background-color: #E5FDF0;" -->
	   <view class="custom-empty-text">
		   <view class="center top"><text class="tn-icon-orange"></text> {{ emptyText }}</view>
		     
			<view class="bulle center">
				 <tn-button fontSize=35 rpx class="round1" shape="round" @click="tn('/minePages/collect?method=method1')" height='25vw' width='35vw' backgroundColor="tn-cool-bg-color-3" fontColor="white">我喜欢的人</tn-button>
				 <tn-button fontSize=35 rpx class="round2" shape="round" @click="tn('/minePages/collect?method=method2')" height='25vw' width='35vw' backgroundColor="tn-cool-bg-color-14" fontColor="white">对我感兴趣的人</tn-button>
				 <tn-button fontSize=35 rpx class="round3" shape="round" @click="tn('/pages/index?index=1')" height='25vw' width='35vw' backgroundColor="tn-cool-bg-color-5" fontColor="white">找搭子</tn-button>
				 <tn-button fontSize=35 rpx class="round4" shape="round" @click="tn('/pages/index?index=2')" height='25vw' width='35vw' backgroundColor="tn-cool-bg-color-11" fontColor="white">广场</tn-button>
			</view>
	   </view>
	   
	</view>
	</view>
 </template>
 <script>
import request from "@/common/request.js"
 export default {
   props: {
     emptyText: {
       type: String,
       default: "No data available.",
     },
   },
   methods: {
	   // 跳转
	   tn(e) {
	   	uni.navigateTo({
	   		url: e,
	   	});
	   }, 
   }
 };
 </script>
 
 <style >
 .custom-empty-container {
   display: flex;
   /* align-items: center; */
   justify-content: center;
   height: 100vh;
   /* background-color: #f3f5f7; */
   transition: background-color 0.3s ease; /* 添加背景颜色过渡效果 */
 }
 
 .center{
	 /* justify-content: center; */
	 margin-left: 10vw;
	 width: 80vw;
	 height: 10vw;
	 /* background-color: aqua; */
 }
 /* 组件按钮的类名 */
.tn-btn{
	 font-size: 22px;
	 /* height: 100vw !important; */
 }
 
 
 .custom-empty-text {
   font-size: 17px;
   color: #00ffff; /* 调整文字颜色 */
   /* margin: 0; */
     /* flex-direction: column;  */
  /* margin-top: 30vw; */
   display: flex;
   flex-wrap: wrap;
   align-items: space-around;
   font-family: 'Artistic Font', cursive; /* 指定艺术字字体 */ 
 }
 
 .top{
	 /* flex-grow: 1; */
	 
 }
 
 /* 中间气泡的样式 */
.bulle{
	/* flex-grow: 2; */
	/* background-color: aquamarine; */
	margin-bottom: 60vw;
	display: flex;
	  flex-wrap: wrap;
	height: 60vw;
	justify-content: space-between;
}
 
 .tn-icon-orange {
	 width: 20px;
	 height: 20px;
	 /* margin-left: 20vw; */
   font-size: 28px;
   margin-right: 10px;
   color: #ffaaff; /* 调整图标颜色 */
   transition: color 0.3s ease; /* 添加图标颜色过渡效果 */
 }
 .round1{
	margin-top: -80px;
	margin-bottom: 10px; 	
 }
.round2{
	 margin-top: -10px;
	 margin-bottom: 10px;
 }
 .round3{
 	 margin-top: -30px;
 }
 .round4{
 	 margin-top: 40px;
 	 margin-bottom: 10px;
 }
 </style>
